<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;"></div>
  </div>
</template>

<script>
import * as API from '../../api/taskType'
import { url } from '../../utils/env-setup'
import E from "wangeditor";

export default {
  name: "Editor",
  // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
  props: {
    example: {
      type: String,
      detail: 'kkkk'
    },
    num: {
      type: Number,
      detail: 0
    },
  },
  data() {
    return {
      editor: null,
      editorContent: '',
      url: ''
    };
  },
  mounted() {
    this.editor = new E(this.$refs.editorElem);
    

    this.editor.customConfig.customUploadImg = (files, insert)=> {
                // files 是 input 中选中的文件列表
                // insert 是获取图片 url 后，插入到编辑器的方法             
                // console.log("changeTitleImg")           
                var formData = new FormData();
                formData.append('file', files[0])
                let reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = (e)=> {
                    let img = new Image();
                    img.src = e.target.result; //获取编码后的值
                    img.onload = ()=> {
                        // console.log('height:' + img.height + '----width:' + img.width)
                        let scale = img.width / img.height //这里是获取图片的宽高比,因为我需要在后台压缩图片使用
                        formData.append('scale', scale)
                        // console.log(formData.get("scale"));
                        API.upLoadImg(formData).then(res => {
                          // debugger
                            if (res.code === 200) {
                            // $('.w-e-text')[0].focus();
                                insert(url + '/16img/' + res.data)
                            // }
                            }
                            })
                    }
                }
            }
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.customConfig.onchange = html => {
      this.editorContent = html;
      this.$emit("editorActon", this.editorContent);
      // this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
    };
    this.editor.customConfig.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ];
    // this.editor.txt.html(this.example)
    this.editor.create(); // 创建富文本实例
    // console.log(this.editor, 'this.editor', this.example, this.num)
    this.editor.txt.html(this.example)
  },
  created() {
    // this.editor.text && this.editor.txt.html(this.example)
  },
  watch: {
    num(val) {
      // console.log(val, 99999999999)
      if (val) {
        this.editor.txt.html(this.example)
      }
    }
  }
}
</script>